﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    
    <style type="text/css">

        .progress {
            width: 1000px;
            margin: 20px auto;
            text-align: center;
        }
        .progress .circle,
        .progress .bar {
            display: inline-block;
            background: #fff;
            width: 40px; height: 40px;
            border-radius: 40px;
            border: 1px solid #d5d5da;
        }
        .progress .bar {
            position: relative;
            width: 80px;
            height: 6px;
            top: -33px;
            margin-left: -5px;
            margin-right: -5px;
            border-left: none;
            border-right: none;
            border-radius: 0;
        }
        .progress .circle .label {
            display: inline-block;
            width: 32px;
            height: 32px;
            line-height: 32px;
            border-radius: 32px;
            margin-top: 3px;
            color: #b5b5ba;
            font-size: 17px;
        }
        .progress .circle .title {
            color: #b5b5ba;
            font-size: 13px;
            line-height: 30px;
            margin-left: -5px;
        }

        /* Done / Active */
        .progress .bar.done,
        .progress .circle.done {
            background: #eee;
        }
        .progress .bar.active {
            background: linear-gradient(to right, #EEE 40%, #FFF 60%);
        }
        .progress .circle.done .label {
            color: #FFF;
            background: #81CE97;
            box-shadow: inset 0 0 2px rgba(0,0,0,.2);
        }
        .progress .circle.done .title {
            color: #444;
        }
        .progress .circle.active .label {
            color: #FFF;
            background: #0c95be;
            box-shadow: inset 0 0 2px rgba(0,0,0,.2);
        }
        .progress .circle.active .title {
            color: #0c95be;
        }

    </style>
    
    <script type="text/javascript">
        $(document).ready(function()
        {
            debugger;
            var i = 1;
            $('.progress .circle').removeClass().addClass('circle');
            $('.progress .bar').removeClass().addClass('bar');
            setInterval(function()
            {
                $('.progress .circle:nth-of-type(' + i + ')').addClass('active');
                $('.progress .circle:nth-of-type(' + (i - 1) + ')').removeClass('active').addClass('done');
                $('.progress .circle:nth-of-type(' + (i - 1) + ') .label').html('&#10003;');
                $('.progress .bar:nth-of-type(' + (i - 1) + ')').addClass('active');
                $('.progress .bar:nth-of-type(' + (i - 2) + ')').removeClass('active').addClass('done');

                i++;

                if (i == 0)
                {
                    $('.progress .bar').removeClass().addClass('bar');
                    $('.progress div.circle').removeClass().addClass('circle');
                    i = 1;
                }
            }, 1000);
        });        
    </script>
</head>
<body>
    
 <div class="progress">
<div class="circle done">
<span class="label">1</span>
<span class="title">0%</span>
</div>
<span class="bar done"></span>
<div class="circle done">
<span class="label">2</span>
<span class="title">25%</span>
</div>
<span class="bar half"></span>
<div class="circle active">
<span class="label">3</span>
<span class="title">50%</span>
</div>
<span class="bar"></span>
<div class="circle">
<span class="label">4</span>
<span class="title">75%</span>
</div>
<span class="bar"></span>
<div class="circle">
<span class="label">5</span>
<span class="title">100%</span>
</div>
</div>    

</body>
</html>
